<template>
    <view class="page">
        <u-navbar class="gradient-bg" title="售后列表" navbarType="2" @leftClick='leftClick' fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <template #top>
                <z-tabs class="service-tab" :current="tabIndex" :style="'top:'+ (titletop+titleheight)+'px'" :list="tabList" active-color="#2e996f"
                    @change="tabChange" />
            </template>
            <view class="order-list">
                <view class="list">
                    <!-- @click="onOrderList(item)" -->
                    <view class="lib" v-for="(item, index) in dataList" :key="index">
                        <view class="title-status">
                            <view class="title">
                                <text class="p1">订单号：</text>
                                <text class="p2">{{item.order_no}}</text>
                            </view>
                            <view class="status">
                                <text>{{selectDictLabel(stateList,item.partner_aftersale_state)}}</text>
                            </view>
                        </view>
                        <view class="goods-list">
                            <view class="goods">
                                <view class="thumb">
                                    <image :src="item.cover_pict" mode="heightFix"></image>
                                </view>
                                <view class="item">
                                    <view class="goods-name">
                                        <text class="title one-omit">
                                            {{item.name}}
                                        </text>
                                        <text class="desc">服务时间：{{item.service_time}}</text>
                                    </view>
                                    <view class="goods-price">
                                        <text class="price">￥{{item.order_price}}</text>
                                        <!-- <text class="num">×1</text> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="btom">
                            <view class="addr">
                                <view class="txt-l">
                                    <text class="desc">预约人：{{item.address_name}}</text>
                                </view>
                                <view class="txt-r">
                                    <text class="price">金额：￥{{item.pay_price}}</text>
                                </view>
                            </view>
                            <view class="addr">
                                <view class="txt-l">
                                    <text class="desc">地址：{{item.address_province+item.address_city+item.address_area+item.address_detailed}}</text>
                                </view>
                            </view>
                        </view>
                        <view class="btnB" v-if="Number(item.partner_aftersale_state)==1">
                            <view></view>
                            <view class="multi">
                                <view class="btn0" @click.stop="refuse(item)">
                                    拒绝取消
                                </view>
                                <view class="btn" @click.stop="agree(item)">
                                    同意取消
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <view>
        </view>
        <DialogBox ref="DialogBox"></DialogBox>
        <public-module></public-module>
    </view>
</template>
<script>
import { getAftersaleApplyLists, examAftersaleApply, completeOrders } from "@/api/order.js"
export default {
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 20,
                key_state: '',  // '':全部  -2:申请拒绝 0:未申请 1:申请中 2:申请成功
                key_order_no: ''
            },
            stateList: [
                {
                    dictLabel: "全部",
                    dictValue: ''
                },
                {
                    dictLabel: "申请中",
                    dictValue: 1
                },
                {
                    dictLabel: "已成功",
                    dictValue: 2
                },
                {
                    dictLabel: "已拒绝",
                    dictValue: -2
                },
                {
                    dictLabel: "未申请",
                    dictValue: 0
                }
            ], //订单状态  0:未接单 1:已接单 2:已(服务)完成
            tabList: [],
            dataList: [],
            loading: true,
            order_no: "",
            titleheight: 0,
            titletop: 0,
            tabIndex: 0,
            is_cancel: false,
            cancelReason: '',
        };
    },
    onLoad() {
        // #ifdef MP-WEIXIN
        getApp().getHeight();
        this.titleheight = getApp().titleheight;
        this.titletop = getApp().titletop;
        // #endif
    },
    onShow() {
        this.tabList = []
        this.stateList.forEach(e => {
            this.tabList.push(e.dictLabel)
        });
    },
    methods: {
        getList(page) {
            if (!uni.getStorageSync("token")) {
                this.$refs.paging.complete([]);
            }
            this.judgeLogin(() => {
                this.loading = true
                this.queryParams.page = page
                getAftersaleApplyLists(this.queryParams).then(res => {
                    console.log(res.data.lists, 788888)
                    this.$refs.paging.complete(res.data.lists);
                    this.loading = false
                }).catch(err => {
                    this.$refs.paging.complete(false);
                    this.loading = false
                })
            });
        },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        leftClick() {
            uni.switchTab({
                url: "/pages/mine/index"
            })
        },
        /**
         * 订单tab点击
         */
        onOrderTab(type) {
            this.queryParams.type = type;
            this.$refs.paging.reload();
        },
        tabChange(index) {
            this.tabIndex = index;
            // this.cateId = this.tabList[index].id
            // //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
            this.queryParams.key_state = this.stateList[index].dictValue;
            this.$refs.paging.reload();
        },
        /**
         * 订单列表点击
         */
        onOrderList(item) {
            uni.navigateTo({
                // url: '/pagesB/orderDetail/orderDetail?orderNo=' + orderNo, (orderNo)
                url: '/pagesB/orderDetail/orderDetail?data=' + encodeURIComponent(JSON.stringify(item)),
            })
        },
        distribute(item) {
            // this.order_no = id
            uni.navigateTo({
                url: '/pagesB/confirmOrder/confirmOrder?data=' + encodeURIComponent(JSON.stringify(item)),
            })
            // this.$refs.popup.open('center')
        },
        refuse(item) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要拒绝售后?',
                value: this.cancelReason,
                DialogType: 'input',
                animation: 0
            }).then((ress) => {
                examAftersaleApply({ order_no: item.order_no, state: -2, tips: ress.value }).then(res => {
                    if (res.code == 1) {
                        this.$message(res.info)
                        this.$refs.paging.reload();

                    }
                }).catch(() => {

                })
            })
        },
        agree(item) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要同意售后?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                examAftersaleApply({ order_no: item.order_no, state: 2, tips: '' }).then(res => {
                    if (res.code == 1) {
                        this.$message(res.info)
                        this.$refs.paging.reload();

                    }
                }).catch(() => {

                })
            }).catch(() => {

            })
        },
        check(item) {
            // this.order_no = id
            uni.navigateTo({
                url: '/pagesB/confirmOrder/confirmOrder?key=' + encodeURIComponent(JSON.stringify(item)),
            })
            // this.$refs.popup.open('center')
        },
        //获取code码
        getValue(val) {
            if (val.length == 4) {
                completeOrders({ order_no: this.order_no, code: val }).then(res => {
                    if (res.code == 1) {
                        this.$refs.popup.close()
                        this.$message(res.info)
                        this.$refs.paging.reload();
                    } else {
                        this.$message(res.info)
                    }
                })
            }
        },
        cancle(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要取消订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToCancel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已取消订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        del(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要删除订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToDel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已删除订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
// /* 顶部返回 */
// .head-back {
//   position: fixed;
//   left: 0;
//   top: 0;
//   z-index: 10;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
//   height: 100rpx;
//   background: linear-gradient(to bottom right, #2e996f, #3f99ab);
//   /* #ifdef APP-PLUS */
//   height: calc(100rpx + var(--status-bar-height));
//   padding-top: var(--status-bar-height);
//   /* #endif */
//   /* #ifdef MP-WEIXIN */
//   height: calc(100rpx + var(--status-bar-height));
//   padding-top: 20rpx;
//   /* #endif */
//   .back {
//     position: absolute;
//     left: 0;
//     top: 0;
//     /* #ifdef APP-PLUS */
//     padding-top: var(--status-bar-height);
//     /* #endif */
//     /* #ifdef MP */
//     padding-top: 20rpx;
//     /* #endif */
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     width: 100rpx;
//     height: 100%;
//     text {
//       width: 20rpx;
//       height: 20rpx;
//       border-left: 2rpx solid #ffffff;
//       border-bottom: 2rpx solid #ffffff;
//       transform: rotate(45deg);
//     }
//   }
//   .title {
//     display: flex;
//     align-items: center;
//     text {
//       font-size: 28rpx;
//       color: #ffffff;
//     }
//   }
//   .more-icon {
//     position: absolute;
//     right: 0;
//     top: 0;
//     /* #ifdef APP-PLUS */
//     right: 0rpx;
//     padding-top: var(--status-bar-height);
//     /* #endif */
//     /* #ifdef MP */
//     right: 220rpx;
//     padding-top: 20rpx;
//     /* #endif */
//     display: flex;
//     align-items: center;
//     height: 100%;
//     .icon-list {
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       width: 80rpx;
//       height: 100%;
//       text {
//         font-size: 34rpx;
//         color: #ffffff;
//       }
//     }
//   }
// }

/* 订单tab */
// .order-tab {
//   position: fixed;
//   left: 0;
//   top: 100rpx;
//   /* #ifdef APP-PLUS || MP-WEIXIN  */
//   top: calc(100rpx + var(--status-bar-height));
//   /* #endif */
//   z-index: 9999;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
//   height: 100rpx;
//   background-color: #ffffff;
//   .tab {
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     width: 20%;
//     height: 80%;
//     text {
//       font-size: 26rpx;
//       color: #5e5e5e;
//     }
//   }
//   .action {
//     text {
//       color: #ea5504;
//     }
//     .line {
//       position: absolute;
//       left: 50%;
//       bottom: 0;
//       width: 62rpx;
//       height: 10rpx;
//       border-radius: 4px;
//       background-color: #ea5504;
//       transform: translate(-50%, 0);
//     }
//   }
// }

/* 订单列表 */
.order-list {
  width: 100%;
  .list {
    .lib {
      padding: 0 4%;
      min-height: 400rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .title-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        .title {
          display: flex;
          align-items: center;
          line-height: 26rpx;
          .p1 {
            font-size: 26rpx;
            color: #3c3c3c;
          }
          .p2 {
            font-size: 26rpx;
            color: #989898;
          }
        }
        .status {
          display: flex;
          align-items: center;
          text {
            font-size: 26rpx;
            color: #e5530e;
          }
          .del {
            padding: 10rpx;
            font-size: 34rpx;
            color: #222222;
            background-color: #f6f6f6;
            border-radius: 100%;
            margin-left: 20rpx;
          }
        }
      }
      .goods-list {
        width: 100%;
        padding: 20rpx 0;
        border-top: 2rpx solid #dcdcdc;
        border-bottom: 2rpx solid #dcdcdc;
        .goods {
          display: flex;
          align-items: center;
          width: 100%;
          .thumb {
            display: flex;
            align-items: center;
            width: 19%;
            height: 100%;
            margin-right: 20rpx;
            image {
              //   width: 106rpx;
              height: 106rpx;
              border-radius: 10rpx;
            }
          }
          .item {
            display: flex;
            align-items: center;
            width: 78%;
            height: 100%;
            justify-content: space-between;
            .goods-name {
              width: 70%;
              height: 106rpx;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title {
                font-size: 26rpx;
                color: #0a0a0a;
                font-weight: 600;
                // margin-bottom: 14rpx;
              }
              .desc {
                display: block;
                font-size: 24rpx;
                color: #999999;
              }
              text:nth-child(2) {
                margin-bottom: 14rpx;
              }
            }
            .goods-price {
              display: flex;
              flex-direction: column;
              text-align: right;
              justify-content: space-between;
              height: 106rpx;
              .price {
                font-size: 26rpx;
                color: #3c3c3c;
                // margin-bottom: 30rpx;
              }
              .num {
                font-size: 26rpx;
                color: #3c3c3c;
                margin-bottom: 14rpx;
              }
              // text {
              //   color: #222222;
              // }
              // .min {
              //   font-size: 26rpx;
              // }
              // .max {
              //   font-size: 34rpx;
              // }
            }
          }
        }
      }
      .status-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 30rpx;
        // height: 100rpx;
        .code {
          text {
            font-size: 26rpx;
            color: #e8380d;
          }
        }
        .button {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          height: 100%;
          .btn {
            padding: 10rpx 30rpx;
            border: 2rpx solid #eeeeee;
            border-radius: 100rpx;
            margin-left: 20rpx;
            text {
              font-size: 26rpx;
              color: #555555;
            }
          }
          .action {
            background-color: #ea5504;
            border: 2rpx solid #e5530e;
            text {
              color: #ffffff;
            }
          }
        }
      }
      .btom {
        padding: 30rpx 0 0;
        .addr {
          display: flex;
          justify-content: space-between;
          align-items: center;
          //   height: 60rpx;
          padding-bottom: 20rpx;
          .txt-l {
            .desc {
              display: block;
              font-size: 24rpx;
              color: #999999;
            }
          }
          .txt-r {
            .price {
              font-size: 28rpx;
              color: #3c3c3c;
            }
          }
        }
      }
      .btnB {
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .multi {
          display: flex;
          .btn0 {
            width: 160rpx;
            height: 56rpx;
            // margin: 0 auto;
            background-color: #efefef;
            border-radius: 24rpx;
            font-size: 24rpx;
            line-height: 56rpx;
            text-align: center;
            // color: #ffffff;
            margin-left: 20rpx;
          }
        }
        .btn {
          width: 160rpx;
          height: 56rpx;
          // margin: 0 auto;
          background-color: #ea5504;
          border-radius: 24rpx;
          font-size: 24rpx;
          line-height: 56rpx;
          text-align: center;
          color: #ffffff;
          margin-left: 20rpx;
        }
      }
    }
    /deep/.uni-scroll-view::-webkit-scrollbar {
      display: none;
    }
  }
}
/* 订单tab */
.service-tab {
  position: fixed;
  left: 0;
  // #ifdef APP-PLUS || H5
  top: calc(88rpx + var(--status-bar-height));
  // #endif
  z-index: 999;
  width: 100%;

  /deep/.z-tabs-conatiner {
    height: 100rpx;
    padding-top: 30rpx;
  }
}
/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(135rpx + var(--status-bar-height)) !important;
}
/deep/.uni-popup__wrapper {
  border-radius: 15rpx;
  overflow: hidden;
}
</style>
